<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对话框</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        body{
            margin: 0;
        }
        .account {
            width:400px;
            border:1px solid #dddddd;
            height:350px;
            border-radius:10px;
            box-shadow:5px 5px 20px #aaa;

            margin-left:auto;
            margin-right:auto;
            margin-top:100px;
            padding:20px 40px;
        }
        .account h2{
        margin-top:15px;
        text-align:center;
        }
    </style>
</head>
<body>
    <div class="account">
        <h2>用户登录</h2>
        <form method="post" action="/login/" novalidate><!--novalidate关闭前端浏览器校验 -->
            {% csrf_token %}
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                {{ form.username }}
                <span style="color: red;">{{ form.username.errors.0 }}</span>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                {{form.password}}
                <span style="color: red;">{{ form.password.errors.0 }}</span>
            </div>
            <div class="form-group">
                <label for="id_code">图片验证码</label>
                <div class="row">
                    <div class="col-xs-7">
                        {{ form.code }}
                        <span style="color: red;">{{ form.code.errors.0 }}</span>
                    </div>
                    <div class="col-xs-5">
                        <img id="image_code" src="/image/code/" style="width: 125px;">
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>{{ error_msg }}
        </form>
    </div>

<script src="../static/js/jquery-3.6.0.min.js"></script>
<script src="../static/plugins/bootstrap-3.4.1/css/bootstrap.css"></script>
</body>
</html>